<template>
  <el-table row-key="id" default-expand-all :data="tableData" lazy border
            @selection-change="onSelectionChange" :header-cell-style="{'background-color': '#f6f6f6'}"
            style="margin-top: 10px;min-height: 70vh;">
    <el-table-column type="selection" width="55"/>
    <el-table-column v-for="item in tableType" :label="item.label" :width="item.width" align="center">
      <template #default="scope"
                v-if="
                item.showType!=='sex'
                &&item.showType!=='img'
                &&item.showType!=='pwd'
                &&item.showType!=='power'
                &&item.showType!=='borrowType'
                &&item.showType!=='borrowState'
                &&item.showType!=='state'
                &&item.showType!=='text'
">
        <span>{{ scope.row[item.prop] }}</span>
      </template>
      <!--   图标   -->
<!--      <template #default="scope" v-if="item.showType==='icon'">-->
<!--        <component :is="scope.row[item.prop]"></component>-->
<!--      </template>-->
      <!--   性别   -->
      <template #default="scope" v-if="item.showType==='sex'">
        <el-tag :type="scope.row[item.prop] === '男'? 'primary' : 'danger'">
          {{ scope.row[item.prop] }}
        </el-tag>
      </template>
      <!--   头像   -->
      <template #default="scope" v-if="item.showType==='img'">
        <img v-if="scope.row[tableType[4].prop]==='男'" :class="item.showType" src="@/assets/avatar-male.png"
             :alt="scope.row[item.prop]">
        <img v-if="scope.row[tableType[4].prop]==='女'" :class="item.showType" src="@/assets/avatar-female.png"
             :alt="scope.row[item.prop]">
      </template>
      <!--   状态   -->
      <template #default="scope" v-if="item.showType==='state'">
        <el-tag :type="scope.row[item.prop] === 1?'primary':'danger'">
          {{ scope.row[item.prop] === 1 ? '正常' : '禁用' }}
        </el-tag>
      </template>
      <!--   借阅状态   -->
      <template #default="scope" v-if="item.showType==='borrowState'">
        <el-tag :type="scope.row[item.prop] === 1?'primary':'danger'">
          {{ scope.row[item.prop] === 1 ? '在库' : '借出' }}
        </el-tag>
      </template>
      <!--   借阅类型   -->
      <template #default="scope" v-if="item.showType==='borrowType'">
        <el-tag :type="scope.row[item.prop] === 1?'primary':'danger'">
          {{ scope.row[item.prop] === 1 ? '归还' : '借阅' }}
        </el-tag>
      </template>
      <!--  密码  -->
      <template #default="scope" v-if="item.showType==='pwd'">
        <el-popover effect="light" trigger="hover" placement="top" width="auto">
          <template #default>
            <div>{{ scope.row[item.prop] }}</div>
          </template>
          <template #reference>
            <el-button size="small">查看</el-button>
          </template>
        </el-popover>
      </template>
      <!--   备注   -->
      <template #default="scope" v-if="item.showType==='text'">
        <el-popover effect="light" trigger="hover" placement="top" width="auto">
          <template #default>
            <div>{{ scope.row[item.prop] }}</div>
          </template>
          <template #reference>
            <span class="text-overflow"> {{ scope.row[item.prop] }} </span>
          </template>
        </el-popover>
      </template>
      <!--   分配权限   -->
      <template #default="scope" v-if="item.showType==='power'">
        <el-button link size="small" type="primary" @click="showPower(scope.$index, scope.row)">
          分配权限
        </el-button>
      </template>
    </el-table-column>

    <el-table-column label="操作" width="200">
      <template #default="scope">
        <el-button link size="small" type="primary" @click="showDetail(scope.$index, scope.row)">
          <el-icon><Tickets /></el-icon>详情
        </el-button>
        <el-button link size="small" type="warning" @click="showEditor(scope.$index, scope.row)">
          <el-icon><Edit /></el-icon>编辑
        </el-button>
        <el-button link size="small" type="danger" @click="onDelete(scope.$index, scope.row)">
          <el-icon><Delete /></el-icon>删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script lang="ts" setup>
import {defineProps} from "vue";
import {Tickets, Edit, Delete} from '@element-plus/icons-vue'

interface Props {
  tableType?: Array<any>;
  tableData?: Array<any>;
  onSelectionChange?: Function;
  showDetail?: Function;
  showPower?: Function;
  showEditor?: Function;
  onDelete?: Function;
}

defineProps<Props>();
</script>

<style scoped>
::-webkit-scrollbar {
  width: 0; /* 横向滚动条的宽度 */
  height: 12px; /* 纵向滚动条的高度 */
}

:deep(.el-table__cell) {
  padding: 0 !important;
}

:deep(.cell) {
  width: 100%;
  height: 44px !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.img {
  width: 30px;
  height: 30px;
}

.text-overflow {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

svg {
  transform: translateX(-2px);
}
</style>